<!-- eslint-disable vue/no-deprecated-destroyed-lifecycle -->
<!-- eslint-disable no-var -->
<template>
	<video
		:autoplay="state.autoplay"
		:controls="state.controls"
		:playsinline="state.playsinline"
		:muted="state.muted"
		id="myVideo"
		style="width: 100%; height: 100%"
	></video>
</template>

<script lang="ts" setup>
import flvjs from "flv.js";
import { useAttrs } from "element-plus";

const flvPlayer = ref<any>({});
onMounted(() => {
	videoPlayer();
});
const state = reactive({
	autoplay: true,
	controls: true,
	muted: true,
	playsinline: false,
	player: null
});
const videoPlayer = () => {
	let attrs = useAttrs();
	if (flvjs.isSupported()) {
		let videoElement = document.getElementById("myVideo");
		let videoUrl = attrs.value.videoUrl as string;

		//判断视频类型
		let videoType = "flv";
		if (videoUrl.endsWith(".flv")) {
			videoType = "flv";
		} else if (videoUrl.endsWith(".rtmp")) {
			videoType = "rtmp/flv";
		} else if (videoUrl.endsWith(".m3u8")) {
			videoType = "application/x-mpegURL";
		} else {
			videoType = "mp4";
		}

		flvPlayer.value = flvjs.createPlayer({
			// type: "flv",
			// url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv" //你的url地址

			type: videoType,
			url: attrs.value.videoUrl as string

			// type: "application/x-mpegURL",
			// url: "https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
		});
		flvPlayer.value.attachMediaElement(videoElement);
		flvPlayer.value.load();
		flvPlayer.value.play();
	}
};
// //销毁
// beforeDestroy() {
// 	if (this.flvPlayer) {
// 		this.flvPlayer.pause();
// 		this.flvPlayer.unload();
// 		this.flvPlayer.detachMediaElement();
// 		this.flvPlayer.destroy();
// 		this.flvPlayer = null;
// 	}
// }
</script>
